import React, {Component} from 'react';
import Swiper from "swiper";
import {Navigation, Pagination} from "swiper/modules";
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

class App extends Component {
    state = {
        list: [111,222,333]
    }

    componentDidMount() {
        new Swiper('.swiper', {
            modules: [Navigation, Pagination],
            pagination: {
                el: '.swiper-pagination'
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        })
    }
    render() {
        return (<div>
            <div className="swiper" style={{height: "300px", width: "600px", backgroundColor: "yellow"}}>
                <div className="swiper-wrapper">
                    {
                        this.state.list.map(item =>
                            <div className="swiper-slide" key={item}>{item}</div>
                        )
                    }
                </div>
                <div className="swiper-pagination"></div>

                <div className="swiper-button-prev"></div>
                <div className="swiper-button-next"></div>
            </div>
        </div>);
    }
}

export default App;